<template>
  <div class="dashboard-container">
    <div id="chartContainer" style="width: 100%; height: 600px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById("chartContainer");
      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          text: "教学楼能源消耗统计",
          subtext: "单位：用水量（吨）/ 用电量（千瓦时）",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "A楼用水量",
            "B楼用水量",
            "C楼用水量",
            "A楼用电量",
            "B楼用电量",
            "C楼用电量",
          ],
        },
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: [
          {
            type: "value",
            name: "用水量",
            axisLabel: {
              formatter: "{value} 吨",
            },
          },
          {
            type: "value",
            name: "用电量",
            axisLabel: {
              formatter: "{value} 千瓦时",
            },
          },
        ],
        series: [
          // 用水量柱状图系列
          {
            name: "A楼用水量",
            type: "bar",
            data: [120, 132, 101, 134, 90, 230, 210, 183, 247, 195, 167, 220],
            barGap: 0,
            emphasis: {
              focus: "series",
            },
          },
          {
            name: "B楼用水量",
            type: "bar",
            data: [150, 232, 201, 154, 190, 330, 410, 283, 347, 295, 267, 320],
            emphasis: {
              focus: "series",
            },
          },
          {
            name: "C楼用水量",
            type: "bar",
            data: [180, 262, 271, 234, 290, 430, 510, 383, 447, 395, 367, 420],
            emphasis: {
              focus: "series",
            },
          },
          // 用电量折线图系列
          {
            name: "A楼用电量",
            type: "line",
            yAxisIndex: 1,
            data: [
              4200, 3890, 4010, 4340, 4560, 4350, 4780, 4890, 4670, 5120, 4980,
              5300,
            ],
            smooth: true,
            lineStyle: {
              width: 3,
            },
          },
          {
            name: "B楼用电量",
            type: "line",
            yAxisIndex: 1,
            data: [
              5800, 5320, 6010, 5840, 5560, 5950, 6280, 6490, 6870, 6520, 6980,
              7300,
            ],
            smooth: true,
            lineStyle: {
              width: 3,
            },
          },
          {
            name: "C楼用电量",
            type: "line",
            yAxisIndex: 1,
            data: [
              6800, 6320, 7010, 6840, 6560, 6950, 7280, 7490, 7870, 7520, 7980,
              8300,
            ],
            smooth: true,
            lineStyle: {
              width: 3,
            },
          },
        ],
        grid: {
          top: "20%",
          containLabel: true,
        },
      };

      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>
